<template>
 <el-card class="user-page">
    <div class="header">
      <div class="search">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item>
            <el-input
              v-model="formInline.username"
              placeholder="根据用户名搜索"
            ></el-input>
          </el-form-item>

        </el-form>
      </div>
      <div class="add">
 <el-button @click="formInline.username = ''">清空</el-button>
            <el-button type="primary" @click="onSubmit">搜索</el-button>
      </div>
    </div>
    <el-alert
      :title="`共${counts}条记录`"
      type="info"
      show-icon
      :closable="false"
    >
    </el-alert>
    <el-table
      :header-cell-style="{ background: '#FAFAFA' }"
      :data="questionsData"
      style="width: 100%; margin-top: 20px"
    >
      <el-table-column prop="id" label="序号" width="80"> </el-table-column>
      <el-table-column prop="email" label="邮箱" width="180"> </el-table-column>
      <el-table-column prop="phone" label="联系电话"> </el-table-column>
      <el-table-column prop="username" label="用户名"> </el-table-column>
      <el-table-column prop="permission_group_title" label="权限组名称">
      </el-table-column>
      <el-table-column prop="role" label="角色"> </el-table-column>
      <el-table-column label="操作" align="center">
        <template #default="scope">
          <el-button
            circle
            plain
            type="primary"
            icon="el-icon-edit"
            @click="edit(scope.row.id)"
          ></el-button>
          <el-button
            circle
            plain
            type="danger"
            icon="el-icon-delete"
            @click="del(scope.row.id)"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination
        background
        layout="prev, pager, next,sizes,jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="params.page"
        :page-sizes="[10, 20, 30, 50]"
        :total="counts"
      >
      </el-pagination>
    </div>
 </el-card>
</template>

<script>
import { randoms } from '@/api/hmmm/questions'
export default {
  name: '',
  components: {},
  props: {},
  data () {
    return {
      formInline: {},
      params: {
        page: 1,
        pagesize: 10

      },
      counts: null,
      questionsData: []
    }
  },
  computed: {},
  watch: {},
  created () {
    this.list()
  },
  methods: {
    onSubmit () {
    //   this.params.username = this.formInline.username

      this.list()
    },
    async list () {
      const res = await randoms(this.params)
      console.log(res)

    //   this.questionsData = data.list
    //   this.counts = data.counts
    },
    handleSizeChange (val) {
      this.params.pagesize = val
      this.list()
    },
    handleCurrentChange (current) {
      this.params.page = current
      this.list()
    }
  }
}
</script>

<style scoped lang="scss">
.user-page {
  margin: 20px 20px;
  .header {
    display: flex;
    justify-content: space-between;
  }
  .pagination {
    display: flex;
    justify-content: flex-end;
    margin-top: 20px;
  }
  .el-dialog {
    .dialog-footer {
      display: block;
      text-align: center;
    }
  }
}
</style>
